Public
Edited
Oct 15, 2023
Paused
4 stars
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
data = (await require('vega-datasets@1'))['gapminder.json']()
Insert cell
Insert cell
md`${data.length} rows, ${Object.keys(data[0]).length} columns!`
Insert cell
Insert cell
printTable(data.slice(0, 10))
Insert cell
Insert cell
Insert cell
data2000 = data.filter(d => d.year === 2000)
Insert cell
printTable(data2000.slice(0, 10))
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
vl.markPoint()
.data(data2000)
.encode(
vl.x().fieldQ('fertility')
)
.render()
Insert cell
Insert cell
vl.markPoint()
.data(data2000)
.encode(
vl.x().fieldQ('fertility'),
vl.y().fieldO('cluster')
)
.render()
Insert cell
Insert cell
vl.markPoint()
.data(data2000)
.encode(
vl.x().fieldQ('fertility'),
vl.y().fieldQ('life_expect')
)
.render()
Insert cell
Insert cell
vl.markPoint()
.data(data2000)
.encode(
vl.x().fieldQ('fertility').scale({zero: false}),
vl.y().fieldQ('life_expect').scale({zero: false})
)
.render()
Insert cell
Insert cell
Insert cell
Insert cell
vl.markPoint()
.data(data2000)
.encode(
vl.x().fieldQ('fertility'),
vl.y().fieldQ('life_expect'),
vl.size().fieldQ('pop')
)
.render()
Insert cell
Insert cell
vl.markPoint()
.data(data2000)
.encode(
vl.x().fieldQ('fertility'),
vl.y().fieldQ('life_expect'),
vl.size().fieldQ('pop').scale({range: [0, 1000]})
)
.render()
Insert cell
Insert cell
Insert cell
vl.markPoint()
.data(data2000)
.encode(
vl.x().fieldQ('fertility'),
vl.y().fieldQ('life_expect'),
vl.size().fieldQ('pop').scale({range: [0, 1000]}),
vl.color().fieldN('cluster')
)
.render()
Insert cell
Insert cell
vl.markPoint({filled: true})
.data(data2000)
.encode(
vl.x().fieldQ('fertility'),
vl.y().fieldQ('life_expect'),
vl.size().fieldQ('pop').scale({range: [0, 1000]}),
vl.color().fieldN('cluster')
)
.render()
Insert cell
Insert cell
vl.markPoint({filled: true})
.data(data2000)
.encode(
vl.x().fieldQ('fertility'),
vl.y().fieldQ('life_expect'),
vl.size().fieldQ('pop').scale({range: [0, 1000]}),
vl.color().fieldN('cluster'),
vl.opacity().value(0.5)
)
.render()
Insert cell
Insert cell
Insert cell
vl.markPoint({filled: true})
.data(data2000)
.encode(
vl.x().fieldQ('fertility'),
vl.y().fieldQ('life_expect'),
vl.size().fieldQ('pop').scale({range: [0, 1000]}),
vl.color().fieldN('cluster'),
vl.opacity().value(0.5),
vl.shape().fieldN('cluster')
)
.render()
Insert cell
Insert cell
cars = (await require('vega-datasets@1'))['cars.json']() // load and parse cars data
Insert cell
printTable(cars.slice(0, 5)) // display the first five rows
Insert cell
Insert cell
Insert cell
// Code here
Insert cell
Insert cell
Insert cell
vl.markPoint({filled: true})
.data(data2000)
.encode(
vl.x().fieldQ('fertility'),
vl.y().fieldQ('life_expect'),
vl.size().fieldQ('pop').scale({range: [0, 1000]}),
vl.color().fieldN('cluster'),
vl.opacity().value(0.5),
vl.tooltip().fieldN('country')
)
.render()
Insert cell
Insert cell
vl.markPoint({filled: true})
.data(data2000)
.encode(
vl.x().fieldQ('fertility'),
vl.y().fieldQ('life_expect'),
vl.size().fieldQ('pop').scale({range: [0, 1000]}),
vl.color().fieldN('cluster'),
vl.opacity().value(0.5),
vl.tooltip().fieldN('country'),
vl.order().fieldQ('pop').sort('descending')
)
.render()
Insert cell
Insert cell
vl.markPoint({filled: true})
.data(data2000)
.encode(
vl.x().fieldQ('fertility'),
vl.y().fieldQ('life_expect'),
vl.size().fieldQ('pop').scale({range: [0, 1000]}),
vl.color().fieldN('cluster'),
vl.opacity().value(0.5),
vl.order().fieldQ('pop').sort('descending'),
vl.tooltip(['country', 'fertility', 'life_expect'])
)
.render()
Insert cell
Insert cell
Insert cell
Insert cell
// Code here
Insert cell
Insert cell
Insert cell
vl.markPoint({filled: true})
.data(data2000)
.encode(
vl.x().fieldQ('fertility'),
vl.y().fieldQ('life_expect'),
vl.size().fieldQ('pop').scale({range: [0, 1000]}),
vl.color().fieldN('cluster'),
vl.opacity().value(0.5),
vl.tooltip().fieldN('country'),
vl.order().fieldQ('pop').sort('descending'),
vl.column().fieldN('cluster')
)
.render()
Insert cell
Insert cell
vl.markPoint({filled: true})
.data(data2000)
.encode(
vl.x().fieldQ('fertility'),
vl.y().fieldQ('life_expect'),
vl.size().fieldQ('pop').scale({range: [0, 1000]})
.legend({orient: 'bottom', titleOrient: 'left'}),
vl.color().fieldN('cluster')
.legend(null),
vl.opacity().value(0.5),
vl.tooltip().fieldN('country'),
vl.order().fieldQ('pop').sort('descending'),
vl.column().fieldN('cluster')
)
.width(130)
.height(130)
.render()
Insert cell
Insert cell
Insert cell
Insert cell
// Code here
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
vl.markPoint()
.data(data2000)
.encode(
vl.x().fieldQ('fertility'),
vl.y().fieldN('cluster'),
vl.shape().fieldN('cluster')
)
.render()
Insert cell
Insert cell
vl.markPoint({filled: true, size: 100})
.data(data2000)
.encode(
vl.x().fieldQ('fertility'),
vl.y().fieldN('cluster'),
vl.shape().fieldN('cluster')
)
.render()
Insert cell
Insert cell
vl.markCircle({size: 100})
.data(data2000)
.encode(
vl.x().fieldQ('fertility'),
vl.y().fieldN('cluster')
)
.render()
Insert cell
Insert cell
vl.markSquare({size: 100})
.data(data2000)
.encode(
vl.x().fieldQ('fertility'),
vl.y().fieldN('cluster')
)
.render()
Insert cell
Insert cell
vl.markTick()
.data(data2000)
.encode(
vl.x().fieldQ('fertility'),
vl.y().fieldN('cluster')
)
.render()
Insert cell
Insert cell
vl.markBar()
.data(data2000)
.encode(
vl.x().fieldN('country'),
vl.y().fieldQ('pop')
)
.render()
Insert cell
Insert cell
vl.markBar()
.data(data2000)
.encode(
vl.x().fieldN('cluster'),
vl.y().fieldQ('pop'),
vl.color().fieldN('country').legend(null),
vl.tooltip().fieldN('country')
)
.render()
Insert cell
Insert cell
vl.markBar()
.data(data2000)
.encode(
vl.x().min('life_expect'),
vl.x2().max('life_expect'),
vl.y().fieldN('cluster')
)
.render()
Insert cell
Insert cell
Insert cell
// Code here
Insert cell
Insert cell
vl.markLine()
.data(data)
.encode(
vl.x().fieldO('year'),
vl.y().fieldQ('fertility'),
vl.color().fieldN('country').legend(null),
vl.tooltip().fieldN('country')
)
.width(400)
.render()
Insert cell
Insert cell
vl.markLine({strokeWidth: 3, opacity: 0.5, interpolate: 'monotone'})
.data(data)
.encode(
vl.x().fieldO('year'),
vl.y().fieldQ('fertility'),
vl.color().fieldN('country').legend(null),
vl.tooltip().fieldN('country')
)
.width(400)
.render()
Insert cell
Insert cell
vl.markLine({opacity: 0.5})
.data(data.filter(d => d.year === 1955 || d.year === 2005))
.encode(
vl.x().fieldO('year').scale({rangeStep: 50}),
vl.y().fieldQ('pop'),
vl.color().fieldN('country').legend(null),
vl.tooltip().fieldN('country')
)
.render()
Insert cell
Insert cell
Insert cell
// Code here
Insert cell
Insert cell
dataUS = data.filter(d => d.country === 'United States')
Insert cell
vl.markArea()
.data(dataUS)
.encode(
vl.x().fieldO('year'),
vl.y().fieldQ('fertility')
)
.render()
Insert cell
Insert cell
vl.markArea({interpolate: 'monotone'})
.data(dataUS)
.encode(
vl.x().fieldO('year'),
vl.y().fieldQ('fertility')
)
.render()
Insert cell
Insert cell
dataNA = data.filter(d => {
return d.country === 'United States'
|| d.country === 'Canada'
|| d.country === 'Mexico';
})
Insert cell
vl.markArea()
.data(dataNA)
.encode(
vl.x().fieldO('year'),
vl.y().fieldQ('pop'),
vl.color().fieldN('country')
)
.render()
Insert cell
Insert cell
vl.markArea()
.data(dataNA)
.encode(
vl.x().fieldO('year'),
vl.y().fieldQ('pop').stack('center'),
vl.color().fieldN('country')
)
.render()
Insert cell
Insert cell
vl.markArea({opacity: 0.5})
.data(dataNA)
.encode(
vl.x().fieldO('year'),
vl.y().fieldQ('pop').stack(null),
vl.color().fieldN('country')
)
.render()
Insert cell
Insert cell
vl.markArea()
.data(dataNA)
.encode(
vl.x().fieldO('year').scale({rangeStep: 40}),
vl.y().min('fertility'),
vl.y2().max('fertility')
)
.render();
Insert cell
Insert cell
Insert cell
vl.markArea()
.data(dataNA)
.encode(
vl.y().fieldO('year').scale({rangeStep: 40}),
vl.x().min('fertility'),
vl.x2().max('fertility')
)
.render();
Insert cell
Insert cell
Insert cell
// Code here
Insert cell
Insert cell
Insert cell
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more